/* 
  学习目标：解决setState连续调用的问题
    1.👍 推荐的方式
    注意：
    1. 只是参数改为了函数，this.setState还是异步行为
    2. 这次还是会做合并，只是合并就不覆盖前面的setState
    3. 这种语法只是为了能够多次连续调用setState
*/

import React from 'react';

export default class App extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    // 异步代码，会导致异步更新组件

    this.setState((preState) => {
      // return的对象，表示如何更新state
      return {
        count: preState.count + 1, // 0 + 1
      };
    });

    this.setState((preState) => {
      return {
        count: preState.count + 2, // 1 + 2
      };
    });

    this.setState((preState) => {
      return {
        count: preState.count + 3, // 3 + 3
      };
    });

    // console.log(this.state.count);

    // this.setState({
    //   count: this.state.count + 1,
    // });

    // this.setState({
    //   count: this.state.count + 2,
    // });

    // this.setState({
    //   count: this.state.count + 3,
    // });
  };

  render() {
    console.log('render被执行了');
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
      </div>
    );
  }
}
